<script setup lang="ts">
  import {inject,ref} from "vue";


  import  {gift} from './provide'
  // inject 第一个参数是 key 值（其中标记了value类型）
  // 第二参数是 默认值（可选），因为provide未调用时，inject返回值是undefined，这必须要求key的类型是Symbol() as InjectionKey<Ref<string>|undefined>
  const msg=inject(gift,ref('默认值'))


  const changeData=()=>{
    msg.value='宝马'
  }
</script>

<template>
  <div style="border: solid 1px black;padding:20px">
    <div>孙子组件</div>
    <div style="color: red">inject接收的数据:{{msg}}</div>
    <button @click="changeData">修改数据</button>
  </div>

</template>

<style scoped>

</style>